<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
        .mc {
            width: 100px;
            height: 68px;
            color: red;
            background-color: green;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <h1>2D</h1>

    <hr />

    <p>translate: 位移</p>
    <div>
        <div class="mc"></div>
        <div class="mc" style="transform: translate(20px, 15px);"></div>
    </div>

    <hr>

    <p>rotate: 旋转</p>
    <div>
        <div class="mc"></div>
        <div class="mc" style="transform: rotate(30deg);"></div>
        <div class="mc" style="transform: rotateX(60deg); background-color: orange;"></div>
        <div class="mc" style="transform: rotateY(60deg); background-color: orangered;"></div>
    </div>

    <p>skew: 倾斜</p>
    <div>
        <div class="mc"></div>
        <div class="mc" style="transform: skew(30deg, -15deg)"></div>
    </div>

    <p>scale: 缩放</p>
    <div>
        <div class="mc"></div>
        <div class="mc" style="transform: scale(1.2, 0.8)"></div>
    </div>

    <p>matrix: 矩阵</p>
    <div>
        <div class="mc"></div>
        <div class="mc" style="transform: matrix(1, 0, 0, 1, 30, 9)">特例位移</div>
        <div class="mc" style="transform: matrix(0.8, 0, 0, 1.2, 0, 0)">特例缩放</div>
    </div>


</body>

</html>